<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background: #222;
			color: #fff;
		}

		* {
			box-sizing: border-box;
		}

		header {
			padding: 10px;
			position: sticky;
			background: #222;
			color: #fff;
			top: 0;
			z-index: 1;
		}

		.shadow::before {
			content: '';
			box-shadow: 0 0 10px 1px #fff;
			position: fixed;
			width: 100%;
			/* fixed 定位在不设置 top 或者 left 值时，仍然位于原先位置，但是会在这个位置固定下来 */
		}

		.shadow::after {
			content: '';
			width: 100%;
			height: 30px;
			background: linear-gradient(to bottom, #222 50%, transparent);
			position: absolute;
			/* absolute定位在不设置 top 或者 left 值时，仍然位于原先位置，也会跟随内容滚动 */
		}

		main {
			padding: 10px;
		}
	</style>
	<body>
		<header>
			<h4>苏苏小苏苏</h4>
		</header>
		<div class="shadow"></div>
		<main>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
		</main>
	</body>
</html>
<!-- @scroll-timeline -->
